import React, { useEffect, useState } from 'react'
import { Tabs, NavBar, Button } from 'react-vant'
import "../gold mine/Show.css"
import { Search } from '@react-vant/icons'
import $ from '../../axios'
import { useNavigate } from 'react-router-dom'
import { useDispatch, useSelector } from 'react-redux'
import { getguang, setguang } from '../store/index';


export default function Show() {
    const state = useSelector(state => state)
    const dispatch = useDispatch()
    const navgiate = useNavigate()
    let [da, setDa] = useState([])
    let [hda, setHda] = useState([])
    const getData = async () => {
        await $.get("/glod_get").then((data) => {
            setDa(data.data.data)
        })
    }

    const hadd = (el) => {
        dispatch(setguang(el))
        navgiate(`/gold?_id=${el._id}`)
    }
    const chushi = () => {
        setHda(state.guang)
    }

    useEffect(() => {
        getData()
        chushi()
    }, [state.guang])
    return (
        <div>
            <div>
                <NavBar
                    title="欢迎来到宝库"
                    leftText={<Search fontSize={20} />}
                    rightText="发布"
                    onClickLeft={() => { console.log(da); }}
                    onClickRight={() => { navgiate("/bu") }}
                />
            </div>
            <div>
                <Tabs>
                    <Tabs.TabPane key={1} title={"我加入的"}>
                        <div className='sbodya'>
                            <div style={{ border: "1px solid green", borderRadius: "8px", width: "80%", height: "100px", marginTop: "10px", marginLeft: "9%" }}>
                                <p style={{ marginLeft: "10px", marginTop: "5px" }}>常逛的库</p>
                                <div>
                                    {
                                        state.guang.length == 0 ? "" : <div style={{ display: "flex" }}>
                                            {
                                                hda.map(el => (
                                                    <div key={el._id} style={{ marginLeft: "20px" }} onClick={() => { navgiate(`/gold?_id=${el._id}`) }}>
                                                        <img src="/2.jpg" style={{ width: "50px", height: "50px", borderRadius: "8px" }} />
                                                        <p>{el.title}</p>
                                                    </div>
                                                ))
                                            }
                                        </div>
                                    }
                                </div>
                            </div>
                            <div style={{ border: "1px solid green", borderRadius: "8px", width: "80%", height: "400px", marginTop: "10px", marginLeft: "9%" }}>
                                <p style={{ marginLeft: "10px", marginTop: "5px" }}>我加入的宝库</p>
                                <div style={{ marginLeft: "20px" }}>
                                    {da.map(el => (
                                        <div key={el._id} style={{ marginTop: "10px", display: "flex" }}>
                                            <img src="/2.jpg" style={{ width: "50px", height: "50px", borderRadius: "8px" }} />
                                            <p style={{ marginLeft: "20px", width: "120px" }}>{el.title}</p>
                                            <Button plain type='info' round size='mini' onClick={() => { hadd(el) }} >
                                                进宝库
                                            </Button>
                                        </div>
                                    ))}
                                </div>
                            </div>
                        </div>
                    </Tabs.TabPane>
                    <Tabs.TabPane key={2} title={"找宝库"}>
                        下划线标签页 {2}
                    </Tabs.TabPane>
                </Tabs>
            </div>
        </div>
    )
}
